<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>

<body>
  <div id="box" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('box'));

    var xData = ['2月', '3月', '4月', '5月', '6月', '7月', '8月'];


    // 指定图表的配置项和数据
    var option = {
      backgroundColor: "#344b58",
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: '#fff'
          }
        }
      },
      grid: { // 网格
        // show:true,
        // borderWidth: 0,
        // top: 110,
        // bottom: 95,
        textStyle: {
          color: "#fff"
        }
      },
      xAxis: [{
        type: 'category',
        axisLine: { // 坐标轴轴线的相关设置
          lineStyle: {
            color: 'rgba(128, 128, 128, 0.5)'
          }
        },
        splitLine: {
          show: false, // 是否显示分割线
        },
        splitArea: {
          show: false
        },
        axisTick: { // 坐标轴刻度相关设置。
          show: false
        },
        axisLabel: { // 坐标轴刻度标签的相关设置。
          interval: 0,
          color: 'rgba(255,255,255,0.7)',
          fontSize: 12
        },
        data: xData
      }],
      yAxis: [{
        type: 'value',
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(255,255,255,0.6)'
        },
        splitArea: {
          show: false
        }
      }],
      series: [{
          "name": "女",
          "type": "bar",
          "stack": "1111",
          "barMaxWidth": 35,
          "barGap": "10%",
          "itemStyle": {
            "normal": {
              "color": {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(35, 157, 250, 1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(35, 157, 250, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          "data": [
            709,
            1917,
            2455,
            2610,
            1719,
            1433
          ],
        },

        {
          "name": "男",
          "type": "bar",
          "stack": "1111",
          "itemStyle": {
            "normal": {
              "color": {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(35, 250, 187, 1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(35, 250, 187, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              "barBorderRadius": 0
            }
          },
          "data": [
            327,
            1776,
            507,
            1200,
            800,
            482
          ]
        }, {
          "name": "总数",
          "type": "line",
          symbolSize: 10,
          symbol: 'circle',
          "itemStyle": {
            "normal": {
              "color": 'rgba(255, 196, 53, 0.6)',
              "barBorderRadius": 0,
            }
          },
          lineStyle: {
            normal: {
              width: 4,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255, 67, 2, 1)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255, 196, 53, 1)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          "data": [
            1036,
            3693,
            2962,
            3810,
            2519,
            1915
          ]
        }
      ]
    }


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>